<template>
	<page-meta page-style="height:100%"></page-meta>
	<view class="change-password-with-email">
		<swiper :current="step" duration="300" disable-touch @change="ev => step = ev.detail.current">
			<swiper-item>
				<view class="swiper-item step-1">
					<text class="title">{{$t('change.password.with.email.title')}}</text>
					<text class="email">{{ store.userInfo?.email }}</text>
					<text class="tips">{{ $t('change.password.with.email.tips') }}</text>
					<up-code-input size="100rpx" borderColor="#525252" fontSize="48rpx" color="#ddd" :space="0"
						class="code-input" v-model="code"></up-code-input>
					<up-code ref="uCodeRef" :startText="$t('change.password.with.email.get.code')" changeText="X"
						:endText="$t('change.password.with.email.retrieve')" @change="codeChange"></up-code>
					<text class="sent-link-btn" @tap="getCode">{{ sentLabel }}</text>
					<view class="actions">
						<up-button class="btn" :disabled="!code" type="primary" size="large" shape="circle"
							@tap="handleNextStep">{{$t('change.password.with.email.next.btn')}}</up-button>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item step-2">
					<up-cell-group class="setting-form" :border="false">
						<up-cell :title="$t('change.password.with.old.query2')">
							<template #value>
								<up-input v-model="formData.newPassword" border="none" password
									:placeholder="$t('change.password.with.old.query2.placeholder')"></up-input>
							</template>
						</up-cell>
						<up-cell :title="$t('change.password.with.old.query3')">
							<template #value>
								<up-input v-model="formData.confirmPassword" border="none" password
									:placeholder="$t('change.password.with.old.query3.placeholder')"></up-input>
							</template>
						</up-cell>
					</up-cell-group>
					<view class="actions">
						<up-button type="primary" size="large" shape="circle"
							@tap="handleComplete">{{ $t('change.password.with.old.complete.btn')}}</up-button>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		useAppStore
	} from '../../store/app';
	import {
		changePasswordByEmail,
		changePasswordByEmailGetCode,
		changePasswordByEmailVerifyCode
	} from '../../apis/components/system';
	import {
		useI18n
	} from "vue-i18n";
	import { i18Replace } from '../../utils/functions';

	const store = useAppStore()
	const uCodeRef = ref(null);
	const step = ref(0);
	const {
		t
	} = useI18n();

	const sentLabel = ref('');
	const code = ref('')
	const formData = reactive({
		confirmPassword: "",
		email: "",
		newPassword: ""
	})
	const codeChange = (text) => {
		if (!isNaN(Number(text))) {
			sentLabel.value = i18Replace(t('change.password.with.email.retrieve.count'), {
				s: text
			})
		} else {
			sentLabel.value = text;
		}
	};

	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			try {
				await changePasswordByEmailGetCode();
				uCodeRef.value.start();
			} catch (err) {
				uni.$u.toast(typeof err === "string" ? err : err.message);
			}
		}
	};

	const handleNextStep = async () => {
		try {
			await changePasswordByEmailVerifyCode(code.value);
			step.value = 1;
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message);
		}
	}


	const verifyFields = () => {
		if (!formData.newPassword) {
			return t('change.password.with.old.query2.placeholder');
		} else if (formData.newPassword.length < 6) {
			return t('change.password.with.old.field.error2');
		} else if (!formData.confirmPassword) {
			return t('change.password.with.old.query3.placeholder');
		} else if (formData.confirmPassword !== formData.newPassword) {
			return t('change.password.with.old.field.error3');
		}
		return null;
	}
	const handleComplete = async () => {
		try {
			const message = verifyFields();
			if (message) {
				uni.$u.toast(message);
				return;
			}
			formData.email = store.userInfo?.email;
			await changePasswordByEmail(formData);
			await store.logout();
			uni.redirectTo({
				url: '/pages/change-passwd-successful/change-passwd-successful'
			})
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message);
		}
	}
</script>

<style lang="scss" scope>
	.change-password-with-email {
		height: 100%;

		swiper,
		swiper-item,
		.swiper-item {
			height: 100%;
		}

		.step-1 {
			padding-top: 60rpx;
			@include flex(column);
			align-items: stretch;
			text-align: center;
			color: #EEEEEE;

			.title {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 1;
				margin-bottom: 24rpx;
			}

			.email {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 1;
				margin-bottom: 48rpx;
			}

			.tips {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 24rpx;
				line-height: 28rpx;
				opacity: 0.6;
				margin-bottom: 32rpx;
			}

			.code-input {
				margin: 0 auto 38rpx;
				background-color: #222d49;
			}

			.actions {
				padding: 0 70rpx;
			}

			.sent-link-btn {
				margin-bottom: 86rpx;

				// font-family: PingFangSC;
				font-size: 28rpx;
				line-height: 1;
				color: #64B7F6;
			}
		}

		.step-2 {
			padding: 24rpx 32rpx;

			.setting-form {
				border-radius: 16rpx;

				& ::v-deep .u-cell__body__content {
					flex: none;
					width: 208rpx;
				}
			}

			.actions {
				margin-top: 160rpx;
			}
		}
	}
</style>